import React, {useState} from 'react';
import {Button, Col, Form, Input, message, Row, Upload, UploadProps} from "antd";
import {Typography} from 'antd';
import {UploadOutlined} from "@ant-design/icons";

const {Title} = Typography;

type LayoutType = Parameters<typeof Form>[0]['layout'];

const Profile: React.FC = () => {
    const [form] = Form.useForm();

    const props: UploadProps = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    return (
        <>
            <Title level={4} style={{paddingBottom: '20px'}}>个人资料</Title>

            <Row>
                <Col span={12}>
                    <Form
                        layout="vertical"
                        form={form}
                        style={{maxWidth: 600}}
                    >
                        <Form.Item label="登录账户">
                            <Input value={"Michael Yang"} disabled={true}/>
                        </Form.Item>
                        <Form.Item label="昵称">
                            <Input placeholder="请输入您的昵称"/>
                        </Form.Item>
                        <Form.Item label="邮箱">
                            <Input placeholder="请输入邮箱"/>
                        </Form.Item>
                        <Form.Item label="手机号">
                            <Input placeholder="请输入手机号码"/>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary">提交</Button>
                        </Form.Item>
                    </Form>
                </Col>
                <Col span={12}>
                    <div>
                        <img src={"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"}
                             style={{width:"200px",height:"200px",borderRadius:"50%"}}/>
                    </div>
                    <div style={{padding:"20px 0 0 40px"}}>
                        <Upload {...props}>
                            <Button icon={<UploadOutlined/>}>上传新头像</Button>
                        </Upload>
                    </div>
                </Col>
            </Row>


        </>
    );
};

export default Profile;
